<template>
  <div class="detail">
    <!-- playlist.name 专辑名?歌单名 -->
    <DetailHeader :title="playlist.name"></DetailHeader>
    <!-- playlist.coverImgUrl 专辑或歌单封面 -->
    <DetailTop :path="playlist.coverImgUrl" ref="top"></DetailTop>
    <div class="bottom">
      <ScrollView ref="scrollview">
        <!-- playlist.tracks 歌曲列表 -->
        <DetaliBottm :playlist="playlist.tracks"></DetaliBottm>
      </ScrollView> 
    </div>
  </div>
</template>

<script>
import { getPlayList,getAlbum,getArtistsSongs,getTopList } from '../api/index'
import DetailHeader from './Detail/DetailHeader.vue'
import DetailTop from './Detail/DetailTop.vue'
import DetaliBottm from './Detail/DetailBottm.vue'
import ScrollView from './ScrollView.vue'
import MetaInfo from '../../vue-meta-info'

export default{
  name:"Detail",
  metaInfo: MetaInfo.detail,
  components:{
    DetailHeader,
    DetailTop,
    DetaliBottm,
    ScrollView
  },
  data: function () {
    return {
      playlist: {} //存储歌单详情或专辑详情
    }
  },
  //created - 数据data和方法methods绑定到应用对象app上(还未渲染到视图)
  created(){
    console.log(123);
    //推荐歌单界面数据获取
    if(this.$route.params.type === 'personalized'){
     //获取歌单详情
      getPlayList({ id: this.$route.params.id })
      .then((data) => {
        this.playlist = data.playlist
      })
      .catch((err) => {
        console.log(err)
      })
    }
    //最新专辑界面数据获取
    else if(this.$route.params.type === 'albums'){
      //获取专辑内容
      getAlbum({ id: this.$route.params.id })
      .then((data) => {
        this.playlist = {
          name: data.album.name,
          coverImgUrl: data.album.picUrl,
          tracks: data.songs
        }
      })
      .catch((err) => {
        console.log(err)
      })
    }
    //歌手列表进入 获取歌手歌曲
    else if (this.$route.params.type === 'singer') {
      getArtistsSongs({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.artist.name,
            coverImgUrl: data.artist.picUrl,
            tracks: data.hotSongs
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
    //排行榜进入获取数据
    else if(this.$route.params.type === 'rank'){
      //获取专辑内容
      getTopList({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.playlist.name,
            coverImgUrl: data.playlist.creator.backgroundUrl,
            tracks: data.playlist.tracks
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }     
  },
  //mounted - 渲染之后,可以获取数据生成的Dom对象
  //控制的组件都在这个界面 所有在这个界面执行动画操作
  mounted(){
    let defaultHeight = this.$refs.top.$el.offsetHeight;
    //调用scrollview提供给外界的scrolling函数(监听滚动距离)
    this.$refs.scrollview.scrolling((offsetY)=>{//往下拉
      if(offsetY>0){
        let scale = 1+offsetY/defaultHeight;
        this.$refs.top.$el.style.transform=`scale(${scale})`//模糊
      }else{//往上拉
        let scale = 15 * Math.abs(offsetY)/defaultHeight;
        this.$refs.top.$el.style.filter=`blur(${scale}px)`//放大
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import"../assets/css/mixin";

.detail{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  @include bg_sub_color();
  .bottom{
   position: fixed;
    top:500px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
